<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {type ItemData, type ItemDataBody, ItemType, ItemTypes} from "../../network/types/Item.ts";
import {useItemStore} from "../../store/ItemStore.ts";
import ItemCard from "./ItemCard.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {toNumber} from "../../utils/Utils.ts";

interface Props {
  // 指定只显示某一中类型的道具
  itemType?: ItemType | undefined
  // 使用道具时的目标用户ID
  userId?: number | undefined
  // 使用道具时的帖子ID
  tid?: number | undefined
  // 使用道具时的回复ID
  pid?: number | undefined
}

const props = defineProps<Props>();

const inventories = ref<ItemDataBody>()
const storeGoods = ref<ItemDataBody>()

const itemStore = useItemStore();

const loading = ref(false)
const page = ref(1)
const maxPage = ref(1)
const type = ref<ItemType>()
type.value = props.itemType

const inventoryList = (force: boolean = false) => {
  loading.value = true
  itemStore.inventory(page.value, force).then(res => {
    inventories.value = res
    maxPage.value = res.hasNext ? res.page + 1 : res.page
    console.log(res)
  }).finally(() => {
    loading.value = false
  })
}

const storeList = (force: boolean = false) => {
  loading.value = true
  itemStore.store(page.value, type.value, undefined, force).then(res => {
    storeGoods.value = res
    maxPage.value = res.hasNext ? res.page + 1 : res.page
    console.log(res)
  }).finally(() => {
    loading.value = false
  })
}

const onError = (e: any) => {
  if (e.error) {
    ElMessage.error(e.error[0])
  } else {
    console.error(e)
  }
}

const onClickItem = async (item: ItemData, tab: 'store' | 'inventory') => {
  console.log(item)
  if (item.type === ItemType.MEDAL) {
    // 点击徽章
    if (tab === 'inventory') {
      //  如果当前在仓库中，则执行使用操作
      ElMessageBox.confirm('是否使用此徽章？ ' + item.typeInfo?.name, '使用徽章').then(() => {
        itemStore.use(item.id, 'use', []).then(res => {
          ElMessage.success(res)
          inventoryList(true)
        }).catch(onError)
      })
    } else {
      // 如果当前在商店中，则执行购买操作
      ElMessageBox.confirm('是否购买此徽章？ ' + item.typeInfo?.name, '购买徽章').then(() => {
        itemStore.buy(item.id).then(res => {
          ElMessage.success(res)
          inventoryList(true)
        }).catch(onError)
      })
    }
  }
  if (item.type === ItemType.TO_USER) {
    // 点击对人道具，如果未指定用户ID，则弹窗要求输入
    const uid = props.userId || toNumber((await ElMessageBox.prompt('请输入目标用户ID', '使用道具', {inputType: 'number'})).value)
    console.log(uid)
    if (!uid) {
      ElMessage.error('未指定目标用户ID')
      return
    }
    if (tab === 'inventory') {
      //  如果当前在仓库中，则执行使用操作
      ElMessageBox.confirm('是否使用此道具？ ' + item.typeInfo?.name, '使用道具').then(() => {
        itemStore.use(item.id, 'use', uid).then(res => {
          ElMessage.success(res)
          inventoryList(true)
        }).catch(onError)
      })
      return
    } else {
      //  如果当前在商店中，则执行购买使用操作
      ElMessageBox.confirm('是否购买并使用道具此道具？ ' + item.typeInfo?.name, '购买并使用道具').then(() => {
        itemStore.use(item.id, 'buy_and_use', uid).then(res => {
          ElMessage.success(res)
          storeList(true)
        }).catch(onError)
      })
    }
  }
  if (item.type === ItemType.TO_REPLY) {
    const tid = props.tid
    const pid = props.pid || 0
    if (!tid) return
    // 点击对贴道具
    if (tab === 'inventory') {
      //  如果当前在仓库中，则执行使用操作
      ElMessageBox.confirm('是否使用此道具？ ' + item.typeInfo?.name, '使用道具').then(() => {
        itemStore.use(item.id, 'use', [tid, pid]).then(res => {
          ElMessage.success(res)
          inventoryList(true)
        }).catch(onError)
      })
    } else {
      // 如果当前在商店中，则执行购买使用操作
      ElMessageBox.confirm('是否购买并使用道具此道具？ ' + item.typeInfo?.name, '购买并使用道具').then(() => {
        itemStore.use(item.id, 'buy_and_use', [tid, pid]).then(res => {
          ElMessage.success(res)
          storeList(true)
        }).catch(onError)
      })
    }

  }
}


onMounted(() => {
  inventoryList()
  storeList()
})
</script>

<template>
  <div v-loading="loading">
    <el-tabs>
      <el-tab-pane label="仓库" lazy>
        <div v-if="inventories" style="text-align: start">
          <item-card v-for="item in inventories.data.filter(it=>!itemType || it.type === itemType)" :data="item" @click="onClickItem(item,'inventory')"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商店" lazy>
        <el-radio-group v-if="!itemType" v-model="type" @change="storeList">
          <el-radio-button :value="undefined" label="全部"/>
          <el-radio-button v-for="type in ItemTypes" :label="type.label" :value="type.typeId"/>
        </el-radio-group>
        <div v-if="storeGoods" style="text-align: start">
          <item-card v-for="item in storeGoods.data.filter(it=>!itemType || it.type === itemType)" :data="item" @click="onClickItem(item,'store')"/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>

</style>